﻿@{
    ViewBag.Title = "Jquery.Validate示例";
}
<style>
    label.error
    {
        color: Red;
        font-size: 12px;
        background: url(/Images/unchecked.gif) no-repeat 0px 0px;
        padding-left: 16px;
        display: none;
    }
    label.success
    {
        color: green;
        font-size: 12px;
        background: url(/Images/checked.gif) no-repeat 0px 0px;
        padding-left: 16px;
    }
</style>
<script type="text/javascript">
    jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
        min: jQuery.validator.format("请输入一个最小为 {0} 的值")
    });
    $(function () {
        $("#myform").validate({
            //debug: true,
            //errorElement:定义错误信息使用的元素类型默认为:label
            errorElement: "label",
            //errorPlacement自定义错误信息展示方式
            //error:错误信息元素,element:验证的form元素
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            //自定义验证成功时显示的信息
            //若不自定义则成功时默认隐藏
            success: function (label) {
                label.text("ok!").addClass("success");
            },
            /* 设置验证规则 */
            rules: {
                username: {
                    required: true,
                    minlength: 5,
                    maxlength: 10
                },
                password: {
                    required: true,
                    rangelength: [6, 8]
                },
                repassword: {
                    required: true,
                    equalTo: "#password"
                },
                phone: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                age: {
                    required: true,
                    digits: true,
                    range: [1, 150]
                },
                year: {
                    number: true,
                    min: 1980,
                    max: 2012
                },
                favor: {
                    required: true,
                    minlength: 2
                },
                gender: {
                    required: true
                },
                city: {
                    required: true
                }
            },
            /* 设置错误信息 */
            messages: {
                username: {
                    required: "必须输入姓名",
                    minlength: "至少输入{0}个字符",
                    maxlength: "最多输入{0}个字符"
                },
                password: {
                    required: "必须输入密码",
                    rangelength: "密码必须是{0}到{1}个字符"
                },
                repassword: {
                    required: "必须输入确认密码",
                    equalTo: "两次输入密码不同"
                },
                phone: {
                    required: "必须输入电话"
                },
                email: {
                    required: "必须输入Email",
                    email: "Email格式错误"
                },
                age: {
                    required: "必须输入年龄",
                    digits: "年龄必须是整数",
                    range: "年龄必须在{0}到{1}之间"
                },
                year: {
                    number: "必须是数字",
                    min: "毕业年份最小是{0}",
                    max: "毕业年份最大是{0}"
                },
                favor: {
                    required: "你咋可能没爱好呢",
                    minlength: "最少选{0}个爱好才行"
                },
                gender: {
                    required: "告诉我你的性别"
                },
                city: {
                    required: "乖乖告诉我你的城市"
                }
            }
        });
    });
    //指定元素动态添加验证规则
    //    $("#myinput").rules("add", {
    //        required: true,
    //        minlength: 2,
    //        messages: {
    //            required: "Required input",
    //            minlength: jQuery.format("Please, at least {0} characters are necessary")
    //        }
    //    });
    //移除指定元素所有验证规则
    //    $("#myinput").rules("remove");
    //移除指定元素特定验证规则
    //    $("#myinput").rules("remove", "min max");
</script>
<h2>
    @ViewBag.Title</h2>
<form id="myform" name="myform" action="">
<table>
    <tr>
        <td>
            用户名：
        </td>
        <td>
            <input id="username" name="username" type="text" />
        </td>
        <td>
            必填验证、字符范围验证
        </td>
    </tr>
    <tr>
        <td>
            密码：
        </td>
        <td>
            <input id="password" name="password" type="password" />
        </td>
        <td>
            必填验证、字符范围验证
        </td>
    </tr>
    <tr>
        <td>
            确认密码：
        </td>
        <td>
            <input id="repassword" name="repassword" type="password" />
        </td>
        <td>
            必填验证、比较验证
        </td>
    </tr>
    <tr>
        <td>
            Email：
        </td>
        <td>
            <input id="email" name="email" type="text" />
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
            年龄：
        </td>
        <td>
            <input id="age" name="age" type="text" />
        </td>
        <td>
            必填验证、整数验证、数字范围验证
        </td>
    </tr>
    <tr>
        <td>
            毕业年份：
        </td>
        <td>
            <input id="year" name="year" type="text" />
        </td>
        <td>
            数字验证、数字范围验证
        </td>
    </tr>
    <tr>
        <td>
            爱好：
        </td>
        <td>
            <input name="favor" type="checkbox" />读书
            <input name="favor" type="checkbox" />游戏
            <input name="favor" type="checkbox" />逛街
            <input name="favor" type="checkbox" />旅游
        </td>
        <td>
            复选框验证、必填验证、选择个数验证
        </td>
    </tr>
    <tr>
        <td>
            性别：
        </td>
        <td>
            <input name="gender" type="radio" />男
            <input name="gender" type="radio" />女
            <input name="gender" type="radio" />保密
        </td>
        <td>
            单选框必须验证
        </td>
    </tr>
    <tr>
        <td>
            所在城市：
        </td>
        <td>
            <select id="city" name="city">
                <option value="">选择城市</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select>
        </td>
        <td>
            下拉列表验证必填验证
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <input id="submit" type="submit" value="submit" />
            <input id="submit2" type="submit" value="submit2" />
            <br />
            <input type="button" value="Button" onclick="alert('valid:'+$('#myform').valid())" />
            使用button触发验证事件，但不提交表单
            <br />
            <input type="button" value="validate" onclick="$('#myform').validate()" />//获取validate对象
            <br />
            <input type="button" value="validateForm" onclick="$('#myform').validate().form()" />//对form进行验证，不会触发表单提交事件
            <br />
            <input type="button" value="validateUserName" onclick="$('#myform').validate().element('#username')" />//只验证指定的元素,不会触发表单提交事件
           
        </td>
    </tr>
</table>
</form>
